<template>
  <a-modal
    width="720px"
    :bodyStyle="store.userStore.bodyStyle"
    v-model:open="modal.open"
    :title="modal.title"
    ok-text="确认"
    :maskClosable="false"
  >
    <div class="modal-content" style="min-height: 400px">
      <a-form class="modelForm" ref="modelForm" :model="showCondition">
        <a-form-item>
          当满足以下
          <a-select style="width: 80px" v-model:value="showCondition.operator">
            <a-select-option value="AND">全部</a-select-option>
            <a-select-option value="OR">任意</a-select-option>
          </a-select>
          条件时，
          <a-select style="width: 80px" v-model:value="showCondition.show">
            <a-select-option :value="true">显示</a-select-option>
            <a-select-option :value="false">隐藏</a-select-option>
          </a-select>
          此题目
        </a-form-item>
        <a-row v-for="(c, index) in showCondition.conditions" :key="index" :gutter="8">
          <a-col>
            <a-form-item
              :name="['conditions', index, 'id']"
              :rules="{
                required: true,
                message: '关联题目不能为空',
                trigger: 'change',
                whitespace: true
              }"
            >
              <a-select
                style="width: 200px"
                v-model:value="c.id"
                @change="conditionsChange(props.showConditionObj[c.id].type, c)"
                placeholder="关联问题"
              >
                <a-select-opt-group v-for="module in props.formData?.content" :key="module.id">
                  <template #label>
                    <span>
                      {{ module.name }}
                    </span>
                  </template>
                  <a-select-option v-for="item in module.list" :key="item.id" :value="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select-opt-group>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="c.id">
            <template v-if="props.showConditionObj[c.id].type === '输入'">
              <a-col class="form-item" :span="4">
                <a-select
                  style="width: 100px"
                  v-model:value="c.operator"
                  @change="operatorChange($event, c)"
                  placeholder="选项"
                >
                  <a-select-option value="填写完成">填写完成</a-select-option>
                  <a-select-option value="===">{{ '=' }}</a-select-option>
                  <a-select-option value=">">{{ '>' }}</a-select-option>
                  <a-select-option value=">=">{{ '≥' }}</a-select-option>
                  <a-select-option value="<">{{ '<' }}</a-select-option>
                  <a-select-option value="<=">{{ '≤' }}</a-select-option>
                  <a-select-option value="!==">{{ '≠' }}</a-select-option>
                </a-select>
              </a-col>
              <a-col class="form-item" :span="8">
                <a-form-item
                  v-if="c.operator !== '填写完成'"
                  label="填写"
                  :name="['conditions', index, 'value']"
                  :rules="{
                    required: true,
                    message: '填写内容不能为空',
                    trigger: 'change',
                    whitespace: true
                  }"
                >
                  <a-input
                    style="width: 120px"
                    v-model:value="c.value"
                    autocomplete="off"
                    placeholder="填写内容"
                  />
                </a-form-item>
              </a-col>
            </template>
            <template v-else-if="props.showConditionObj[c.id].type === '数字选择'">
              <a-col class="form-item" :span="4">
                <a-select
                  style="width: 100px"
                  v-model:value="c.operator"
                  @change="operatorChange($event, c)"
                  placeholder="选项"
                >
                  <a-select-option value="填写完成">填写完成</a-select-option>
                  <a-select-option value="===">{{ '=' }}</a-select-option>
                  <a-select-option value=">">{{ '>' }}</a-select-option>
                  <a-select-option value=">=">{{ '≥' }}</a-select-option>
                  <a-select-option value="<">{{ '<' }}</a-select-option>
                  <a-select-option value="<=">{{ '≤' }}</a-select-option>
                  <a-select-option value="!==">{{ '≠' }}</a-select-option>
                </a-select>
              </a-col>
              <a-col class="form-item" :span="8">
                <a-form-item
                  label="选择"
                  v-if="c.operator !== '填写完成'"
                  :name="['conditions', index, 'value']"
                  :rules="{
                    required: true,
                    message: '选择项不能为空',
                    trigger: 'change'
                  }"
                >
                  <a-select style="width: 160px" v-model:value="c.value" placeholder="选项">
                    <a-select-option
                      v-for="tag in props.showConditionObj[c.id].config.max -
                      props.showConditionObj[c.id].config.min"
                      :key="tag"
                      :value="props.showConditionObj[c.id].config.min + tag - 1"
                      >{{ props.showConditionObj[c.id].config.min + tag - 1 }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </template>

            <a-col
              class="form-item"
              :span="12"
              v-else-if="
                ['单选', '单选+输入', '多选', '多选+输入'].includes(
                  props.showConditionObj[c.id].type
                )
              "
            >
              <a-form-item
                label="选择"
                :name="['conditions', index, 'value']"
                :rules="{
                  required: true,
                  message: '选择项不能为空',
                  trigger: 'change'
                }"
              >
                <a-select style="width: 160px" v-model:value="c.value" placeholder="选项">
                  <a-select-option
                    v-for="item in props.showConditionObj[c.id].options"
                    :key="item.sort"
                    :value="item.sort"
                    >{{ item.sort + '.' + item.label }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col v-else :span="12" style="line-height: 32px">
              <a-select
                style="width: 100px"
                v-model:value="c.operator"
                @change="operatorChange($event, c)"
                placeholder="选项"
              >
                <a-select-option value="填写完成">填写完成</a-select-option>
              </a-select>
            </a-col>
          </template>
          <a-col v-else :span="12"></a-col>
          <a-col class="form-item">
            <icon-font
              v-if="index"
              class="icon-del"
              type="icon-shanchu"
              @click="conditionsDel(index, showCondition.conditions)"
            />
            <icon-font
              v-else
              class="icon-plus"
              type="icon-xinzeng"
              @click="conditionsAdd(showCondition.conditions)"
            />
          </a-col>
        </a-row>
      </a-form>
    </div>
    <template #footer>
      <a-button @click="modal.open = false">取消</a-button>
      <a-button key="submit" type="primary" @click="confirm">确定</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import IconFont from '@/components/IconFont/index.vue'
import store from '@/store'

const modal = reactive({
  title: '题目关联',
  open: false
})

const modelForm = ref(null)

const showCondition = ref({
  operator: 'AND',
  show: true,
  conditions: [
    {
      id: '',
      operator: '===',
      value: ''
    }
  ]
})

const init = (item) => {
  modelForm.value?.clearValidate()

  if (item) {
    if (!item.hasOwnProperty('show')) {
      item['show'] = true
    }
    showCondition.value = item
  } else {
    showCondition.value = {
      operator: 'AND',
      show: true,
      conditions: [
        {
          id: '',
          operator: '===',
          value: ''
        }
      ]
    }
  }

  modal.open = true
}

// const showConditionObj = ref({})

const conditionsAdd = (list) => {
  list.push({
    id: '',
    operator: '===',
    value: ''
  })
}

const conditionsDel = (i, list) => {
  list.splice(i, 1)
}

const conditionsChange = (type, c) => {
  if (type === '输入') {
    c.operator = '填写完成'
    c.value = ''
  } else if (type === '搜索输入') {
    c.operator = '填写完成'
    c.value = ''
  } else {
    c.operator = '==='
    c.value = ''
  }
}

const operatorChange = (e, c) => {
  console.log(e)
  if (e === '填写完成') {
    c.value = ''
  }
}

const confirm = () => {
  modelForm.value.validate().then(() => {
    emit('onConfirm', showCondition.value)

    modal.open = false
  })
}

const props = defineProps({
  formData: Object,
  showConditionObj: Object
})

const emit = defineEmits(['onConfirm'])

defineExpose({
  init
})
</script>

<style lang="less" scoped>
.icon-plus,
.icon-del {
  font-size: 16px;
}
.icon-plus {
  color: #165dff;
}
.icon-del {
  color: #f53f3f;
}
</style>
